<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>请假申请</title>
    <script src="/assets/js/config.js"></script>
    <link rel="stylesheet" type="text/css" href="css/apply.css"/>
    <style>
        label {
            margin-right: 1em;
        }
    </style>
</head>
<body>
<button onclick="printPage()" style="float: right;" id="button">打印</button>

<form id="fm">
    <div hidden><input name="startDate"><input name="endDate"></div>
    <h2 align=" center" id="title">请假申请</h2>
    <p>申请日期： <span id="crtDate"></span></p>
    <table border="1" style="border-collapse: collapse;width: 100%">
        <tr>
            <td>姓名</td>
            <td><input class="layui-input" name="userName"></td>
            <td>工号</td>
            <td><input class="layui-input" name="account"></td>
            <td>部门</td>
            <td><input class="layui-input" name="department"></td>
        </tr>
        <tr>
            <td>请假类型</td>
            <td colspan="3">
                <label>事假<input id="radio1" value="1" type="radio" name="leaveType" checked></label>
                <label>病假<input id="radio2" value="2" type="radio" name="leaveType"></label>
                <label>婚假<input id="radio3" value="3" type="radio" name="leaveType"></label>
                <label>产假<input id="radio4" value="4" type="radio" name="leaveType"></label>
                <label>护理假<input id="radio5" value="5" type="radio" name="leaveType"></label>
                <label>丧假<input id="radio6" value="6" type="radio" name="leaveType"></label>
                <label>工伤<input id="radio7" value="7" type="radio" name="leaveType"></label>
            </td>
            <td>附件:</td>
            <td id="annex">
                <button type="button" class="layui-btn" id="test2" onclick="chooseFile()">
                    <i class="layui-icon">&#xe67c;</i>上传文件
                </button>
                <span id="fileName"></span>
            </td>
        </tr>
        <tr>
            <td>情况说明</td>
            <td colspan="5"><textarea class="layui-textarea" name="reason"></textarea></td>
        </tr>
        <tr>
            <td>请假时间</td>
            <td colspan="3">
                <!--<input type="text" class="layui-input" id="test1">-->
                <input type="text" class="layui-input" readonly id="test1">
            </td>
            <td>共计</td>
            <td colspan="3">
                <input type="text" readonly name="dateCount" class="layui-input"
                       style="width: 80%;display: inline-block">天
            </td>
        </tr>
        <tr>
            <td>备注</td>
            <td colspan=5" style="width: 300px">
                1、请病事假扣岗级工资5%，奖金20%；2、班长有一天事假的审批权，部(作业区)有三天事假的审批权，三天以上事假必须由部门领导签署意见后报分管副总审批；3、病假、婚假、产假、护理假、丧假、工伤需向综合部提交相关证明方可享受相关待遇；4、综合部一律按照假条上报时间进行统计，延报或不报一律按旷工处理"
            </td>
        </tr>
    </table>
    <br>
</form>
</body>
<script type="text/javascript" src="js/design.js"></script>
<script type="text/javascript" src="js/multiSelect.js"></script>
<script>
    var annex = "", fileName = "";
    layui.use(['laydate','form'], function () {
        var laydate = layui.laydate;
        //执行一个laydate实例

        var id = getUrlParam();
        if (id) {
            //审批进入
            drawApprove(id);
            $("input").prop('readonly', true);
            $("#test1").attr('readonly', "");
            $("#app").hide();
            $(".layui-layer-btn").hide();
            $.post('/office/flowStepInstance/queryDetail', {id: id}, function (res) {
                if (res.code == 200) {
                    var data = res.obj;
                    drawForm(data, $("#fm"))
                    $("#crtDate").text(formatDate(new Date(data.crtDate)));
                    $("#radio" + res.obj.leaveType).attr('checked', 'checked');
                    $("#test1").val( res.obj.startDate + "至" + res.obj.endDate)
                    if (res.obj.annex) {
                        $("#annex").html(`<a href="#" style="color: blue;text-decoration: underline" onclick="showAnnex('${res.obj.annex}')">点击查看</a>`)
                    }
                }
            });
        } else {
            laydate.render({
                elem: '#test1', //指定元素
                range: '至',
                isInitValue: true,
                trigger: 'click',
                change: function (value) {
                    var splitKey=' 至 '
                    var startDate = Date.parse(value.split(splitKey)[0]);
                    var endDate = Date.parse(value.split(splitKey)[1]);
                    $("[name='startDate']").val(value.split(splitKey)[0]);
                    $("[name='endDate']").val(value.split(splitKey)[1]);
                    var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
                    $("[name='dateCount']").val(days+1);
                }
            });
            drawAdd();
            var today = formatDate(new Date());
            $("#crtDate").text(today);
            $("[name='userName']").val(getUserName());
            $("[name='department']").val(getOrgName());
            $("[name='account']").val(getAccount());
            //渲染流程
            $.post('/office/flowStepTemplate/getTemplateStep', {userId: getUserId(), templateId: 8}, function (res) {
                if (res.code == 200) {
                    if (res.obj) {
                        drawFlowStep(res.obj.flowNodes);
                    }
                }
            });
        }
    });

    function submitForm() {
        var param = getSubmitParam();
        if (!validateCommonForm()) {
            showAlert("请补全表单详情后提交哦");
            return false;
        }
        layer.confirm('确认提交', function () {
            param.userId = localStorage.getItem("userId");
            param.title = $("#title").text();
            param.leaveType = $("[name='leaveType']:checked").val();
            param.annex=annex;
            doSubmit('/office/flowWork/addAskLeaveFlow', param)
        })
    }
    function chooseFile() {
        var input = document.createElement("input");
        input.type = "file";
        input.click(); //代码执行到这里，本地文件选择框便会打开！
        input.onchange = function () {
            cbAnnexFile = input.files[0];
            if (cbAnnexFile.name.indexOf('jpeg') == -1 &&
                cbAnnexFile.name.indexOf('pdf') == -1 &&
                cbAnnexFile.name.indexOf('png') == -1 &&
                cbAnnexFile.name.indexOf('jpg') == -1) {
                showAlert('为了保证手机端可以查看附件,请上传:jpeg,jpg,png,pdf格式的附件');
                return false;
            }
            $("#fileName").text(cbAnnexFile.name);
            layer.confirm('是否确定上传' + cbAnnexFile.name + '?', function (i) {
                var formData = new FormData();
                formData.append("file", cbAnnexFile);
                var result = uploadFile(formData);
                if (result.code == 200) {
                    annex = result.obj.storeName;
                    fileName = result.obj.fileName;
                    showMsg('上传成功');
                    layer.close(i);
                }
            })
        };
    }


    function printPage() {
        window.print();
    }
    var beforePrint = function () {
        $("#button").hide();
        $("#notice").hide();

    };

    var afterPrint = function () {
        $("#button").show();
        $("#notice").show();
    };

    if (window.matchMedia) {   //返回一个新的 MediaQueryList 对象，表示指定的媒体查询字符串解析后的结果。
        var mediaQueryList = window.matchMedia('print');
        mediaQueryList.addListener(function (mql) {
            if (mql.matches) {
                beforePrint();
            } else {
                afterPrint();
            }
        });
    }

    window.onbeforeprint = beforePrint;
    window.onafterprint = afterPrint;

</script>

</html>
